import React from "react"
import ReactDOM from "react-dom"
import { payTemplate, paySuccess }from "./RechargeWithType.template.js"
import AJAX from "../../lib/ajax_pay"
import Tools from "../../lib/tools"
import Loading from "../../components/Loading/Loading"
import wx from 'wx'
import { addErrorListener } from '../../lib/handleError'

import "../../lib/resetFont"
import "./RechargeWithType.less"

class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            url_params: Tools.getParams(),
            loading: true,
            loading_text: "加载中...",
            type: null                      // Charge: 支付; Recharge: 充值
        }
    }
   
    componentWillMount() {
        addErrorListener()()
        AJAX.appendBaiduAnalysis()
        const { url_params } = this.state
        if(url_params.code) {
            AJAX.sid(data=>{
                this.setState({
                    sid: data.body.sid
                },()=>{
                    this.prepay()
                })
            })
        }else {
            AJAX.auth()
        }
    }

    //充值
    recharge() {
        const { sid, url_params } = this.state
        const params = {
            sid: sid,
            charge_type: url_params.charge_type,
            sub_type: url_params.sub_type,
            amount: url_params.amount,             //支付金额
            trade_id: url_params.trade_id,         //支付订单ID
            source: url_params.source,             //充值来源
        }
        return ()=>{
            AJAX.request("rechargeWithType", params, data=>{
                const prepay_data = data.body.trade.prepay
                this.setState({
                    prepay_data,
                    amount: url_params.amount / 100,
                    loading: false
                },()=>{
                    this.pay()
                })
            })
        }
    }

    prepay() {
        const { sid, type } = this.state
        if(sid){
            AJAX.sig(data => {
                wx.config({
                    debug: false, //调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: data.body.appid, // 必填，公众号的唯一标识
                    timestamp: data.body.timestamp, // 必填，生成签名的时间戳
                    nonceStr: data.body.noncestr, // 必填，生成签名的随机串
                    signature: data.body.signature,// 必填，签名，见附录1
                    jsApiList: ["chooseWXPay"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                })
                wx.ready(this.recharge())
            })
        }else {
            alert("尚未获取 sid ")
        }
    }

    pay() {
        const { prepay_data } = this.state
        wx.chooseWXPay({
            timestamp: prepay_data.timeStamp, // 签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
            nonceStr: prepay_data.nonceStr, // 支付签名随机串，不长于 32 位
            package: prepay_data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
            signType: prepay_data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
            paySign: prepay_data.paySign, // 支付签名
            success: (res) => {
                this.setState({
                    pay_success: true
                })
                setTimeout(()=>{
                    wx.closeWindow()
                },1000)
            },
            fail: (res) => {
                alert('支付失败')
            }
        })
    }

    render() {
        const { loading, loading_text, pay_success } = this.state
        let content = <div>
                        <Loading show={loading} text={loading_text} />
                    </div>
        if(loading === false){
            if(pay_success) {
                content = paySuccess(this)
            }else {
                content = payTemplate(this)
            }
        }
        return content
    }
}
ReactDOM.render(<App />, document.getElementById('app'))